//登录

import './index.scss';
import { Card, Form, Input, Button, message ,Select} from 'antd';
import {KeyOutlined} from'@ant-design/icons'
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import {fetchLogin} from'@/store/modules/user'
import FormItem from 'antd/es/form/FormItem';
import { identity } from 'lodash';

const { Option } = Select

const userList = [
  {
    key: '/admin',
    label: '管理员',
  },
  {
    key: '/coach',
    label: '教练员',
  },
  {
    key: '/student',
    label: '学员',
  },
];

const Login = () => {
  //      const [userType, setUserType] = useState([]); // 用于存储用户选择的身份
  const dispatch = useDispatch()
 const navigate =useNavigate()
const [type,setType] = useState('/admin')
const onUserChange=(key)=>{
  console.log('用户选择了',key)

  setType(key)
}
//管理员 0,教练 1,学员 2
  const onFinish = async(values) =>{
    // console.log("用户数据：",values)
    // console.log("修改"+userKey)
    // const trimmedKey = -1
    const trimmedKey = values.identity.replace(/^\//, '');
    let identityNumber;
  switch(trimmedKey) {
    case 'admin':
      identityNumber = 0;
      break;
    case 'coach':
      identityNumber = 1;
      break;
    case 'student':
      identityNumber = 2;
      break;
    default:
      identityNumber = -1;
  }
    const formDataWithDropdown = {
      ...values,
      identity: identityNumber
    };
    await dispatch(fetchLogin(formDataWithDropdown));
  }

  //跳转忘记密码页面
  const handleForgetPasswoed =()=>{
    navigate('/forgetPassword')
  }
  const status = useSelector(state => state.user.status);
  useEffect(() => {
  if (status === '200') {
    console.log("登录成功");
    navigate(type)
    message.success('登录成功！')
    // 进行其他成功后的操作，如导航至主页等
  }else if(status === '202')
  {
    message.error('登录失败！')
  }
}, [status]); // 传入状态作为依赖数组，当status变化时重新执行effect
    return (
     <div className="login">
        <Card className="login-container">
           <div>驾校管理系统</div>
           {/* 登录表单 */}
            <Form onFinish={onFinish} validateTrigger="onBlur">
          <Form.Item
          name='phone'
          //多条校验，先校验第一条规则，第一条通过后，再校验第二条
          rules={[
            {
                required: true,
                message: '请输入手机号'
            },
            {
                pattern:/^1[3-9]\d{9}$/,
                message:'请输入正确的手机号格式'
            }
            ]}>
            <Input size="large" placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item
          name='password'
          rules={[
            {
                required: true,
                message: '请输入密码'
            }
            ]}>
            <Input size="large" placeholder="请输入密码" />
          </Form.Item>
            <Form.Item label="用户类型" name="identity"
            rules={[
              {
                required:true,
                message:'请选择用户类型'
              }
            ]}
            >
            <Select
              placeholder="请选择用户"
              defaultValue="请选择"
              style={{ width: 120 }}
              onChange={onUserChange}
            >
              {userList.map(item =><Option key={item.key} value={item.key}>{item.label}</Option>)}

            </Select>
          </Form.Item>

              <Form.Item>
                <Button  htmlType="submit" size="large"block>
                  登录
                </Button>
                {/* <Button style={{border:'none',backgroundColor:'transparent'}} size="large" onClick={handleForgetPasswoed} block><KeyOutlined />忘记密码</Button> */}
              </Form.Item>

            </Form>
          </Card>
    <div style={{position:'absolute',top:'96%',left:'45%',color:'white'}}>驾校管理系统&copy;2024-2099</div>
        </div>
      )
    }

    export default Login
